<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="keywords" content="微信砍价,微信集赞,微信抢钱,微信超级加油,商家岛,客牛官网,微信招生神器,客牛微传,商家神器,商家岛,砍价平台,微信砍价,微信拼团,微信加油活动">
    <meta name="description"
          content="客牛微传,由微信用户群,区域化,社区化,从众话特点,专而推出了一系列用于商家如教育培训,家装设计,运动健身等等生活直接高密度消费行业的活动方式,精准吸纳本地客户.客牛,作为微信活动专业平台,将立足于微信,继续打造    活动第一品牌.">
    <title id="PageTitle"></title>
    <script>
      var width = document.documentElement.clientWidth;
      var scale = width / 375;
      var css = 'html{font-size:' +
        37.5 * scale +
        'px;}';
      document.write('<style>' + css + '</style>');
    </script>
        <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
</head>
<body>
<div id="app"  v-cloak style="overflow: hidden">
    <music :music="BgMusic"></music>
    <func-banner :mananger='true'></func-banner>
    <div class="container">
        <main>
            <div class="banner">
                <img src="../../../img/activity/collect/get_star/banner.jpg" alt="">
                <!-- 星星位置等 -->
                <div class="banner_header">
                    <span class="night_sky_star blinking star_1"></span>
                    <span class="night_sky_star blinking star_2"></span>
                    <span class="night_sky_star blinking star_3"></span>
                    <span class="night_sky_star blinking star_4"></span>
                    <span class="night_sky_star blinking star_5"></span>
                    <span class="night_sky_star blinking star_6"></span>
                    <span class="night_sky_star blinking smile"></span>
                </div>
                <div class="activity_countdown">
                    <p v-if="partinstatus != partinstatusall.AtActInActiveEnd">活动时间
                        <span class="end_word">结束</span>倒计时:
                        <span class="dynamic_time">
                                <span>{{countDown.days}}</span>天
                                <span>{{countDown.hours}}</span>时
                                <span>{{countDown.minutes}}</span>分
                                <span>{{countDown.seconds}}</span>秒</span>
                    </p>
                    <p v-if="partinstatus == partinstatusall.AtActInActiveEnd">活动已结束</p>
                </div>
                <div class="basin">
                    <img src="../../../img/activity/collect/get_star/basin.png" alt="">
                </div>
                <div class="activity_slogan">
                    <h1 style="font-family: tahoma;" class="title">{{Title}}</h1>
                </div>
            </div>
            <div class="content">
                <div class="status-bar">
                    <div class="grid" v-if="partinstatus==partinstatusall.JoinJustNow">
                        <div>
                            <button class="button join" type="button" v-on:click="AlertJoinPop">我要参加</button>
                        </div>
                    </div>
                    <div class="grid" v-if="partinstatus==partinstatusall.JoinDone">
                        <div>
                            <button class="button sendfriend" type="button" v-on:click="SendFriend">马上找朋友帮忙</button>
                        </div>
                    </div>
                    <div class="grid" v-if="partinstatus==partinstatusall.ParterLook">
                        <div class="help_cut">
                            <button class="button helpcut" type="button" v-on:click="TakePartIn">帮TA摘星</button>
                        </div>
                        <div class="want_join join">
                            <button  v-on:click="AlertJoinPop">我要参加</button>
                        </div>
                    </div>
                    <div class="grid" v-if="partinstatus==partinstatusall.ParterDone">
                        <div class="help_cut">
                            <button class="button helpcut" type="button" v-on:click="TakePartIn">帮TA摘星</button>
                        </div>
                        <div class="want_join">
                            <button v-on:click="BackMine">返回我的</button>
                        </div>
                    </div>
                    <div class="grid" v-if="partinstatus==partinstatusall.AtActInActiveStart">
                        <div>
                            <button class="button join" type="button">活动尚未开始，请先收藏</button>
                        </div>
                    </div>
                    <div class="grid" v-if="partinstatus==partinstatusall.AtActInActiveEnd">
                        <div>
                            <button class="button join" type="button">活动已结束,下次趁早哦</button>
                        </div>
                    </div>
                    <div class="grid"
                         v-if="partinstatus==partinstatusall.JoinDone || partinstatus==partinstatusall.ParterLook || partinstatus==partinstatusall.ParterDone">
                        <div>
                            <p>
                                <b>{{JoinerMsg.Name}}</b> 已有
                                <b>{{JoinerMsg.NowStar}}</b> 颗星星</p>
                        </div>
                        <div>
                            <p>还差
                                <b>{{Prizes.NeedNum - JoinerMsg.NowStar}}</b> 颗星星</p>
                        </div>
                    </div>
                </div>

                <div class="activity">
                    <div class="card-body" v-if="Prizes">
                        <h3 v-if="Prizes.PrizeNum">本期奖品
                            <span>{{Prizes.PrizeNum}}</span>份 剩余
                            <span>{{Prizes.PrizeNum - Prizes.LastNum}}</span>份</h3>
                        <p v-if="Prizes.NeedNum">活动时间内摘到
                            <span>{{Prizes.NeedNum}}</span>颗星星</p>
                        <p v-if="Prizes.Name">即可得到
                            <span>{{Prizes.Name}}</span>
                        </p>
                    </div>
                    <g-section :sedata="Content"></g-section>
                    <div class="activity_des">
                        <div class="activity_des_title">
                            <h2>排行榜</h2>
                        </div>
                        <div class="activity_des_content">
                            <div class="phb">
                                <div class="bmb">
                                    <table>
                                        <tr>
                                            <th>排名</th>
                                            <th>姓名</th>
                                            <th>当前星星数排名</th>
                                        </tr>
                                        <tr v-for="(item,index) in RankMsg">
                                            <td>{{index +1}}</td>
                                            <td>{{item.Name}}</td>
                                            <td>{{item.NowStar}}颗</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <div class="load">数据加载中,请稍后</div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!-- 报名弹窗 -->
    <user-join :othermsg="Other" v-on:join="UserJoinAct" v-on:back="BackMine"></user-join>
    <!-- 分享标题以及副标题处弹窗 -->
    <share-pop :sharemsg="ShareMsg" ></share-pop>
    <notice-pop :actstatus="ActStatus"></notice-pop>
    <add-msg :mobile="Mobile"></add-msg>
</div>
</body>
</html>